<template>
	<view id="bind-chat-account-page">
		<view class="page-content">
			<view class="cur-qq-account">
				当前QQ号：<text class="text">{{!!curQQNum?curQQNum:'未绑定'}}</text>
			</view>
			<view class="account-input">
				<input class="input" type="number" v-model="QQNum" placeholder="请输入QQ号"></input>
			</view>
		</view>
		<button class="sumbit-btn" type="default" :loading="loading" :disabled="loading" @click="banding()">提交</button>
	</view>
</template>

<script>
	import {
		apiBindWeChatNum
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				QQNum: '',
				curQQNum: '',
				loading: false
			};
		},
		onLoad(option){
			this.curQQNum = option.qq
		},
		onShow() {

		},
		methods:{
			banding(){
				if(!this.QQNum){
					this.$msg.showToast('请输入QQ号')
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.loading = true
				apiBindWeChatNum({
					token:this.token,
					qq: this.QQNum,
					submitType: 2
				}).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.$msg.showToast('绑定成功')
						setTimeout(()=>{
							this.loading = false
							uni.switchTab({
								url:'../profile/a'
							})
						},500)
					} else{
						this.loading = false
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					uni.hideLoading()
					this.loading = false
					this.$msg.showToast(res.data.msg)
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	#bind-chat-account-page{
		.page-content {
			background: #FFFFFF;
			padding: 100upx 0;
			.cur-qq-account{
				text-align: center;
				font-size: 30upx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
				line-height: 32upx;
				.text {
					color: $theme-color;
				}
			}
			.account-input {

				.input{
					border: 1px solid #e0e0e0;
					width: 80%;
					margin: 0 auto;
					height: 80upx;
					font-size: 30upx;
					padding: 0 16upx;
					border-radius: 10upx;
					margin-top: 32upx;
				}
			}
		}
		.sumbit-btn {
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
		}
	}

</style>
